<script>
import {
  defineComponent,
  reactive,
  toRefs
} from 'vue'
import TopMenu from '../components/TopMenu.vue'

export default defineComponent({
  components: {
    TopMenu
  },
  setup() {
    const state = reactive({})

    return {
      ...toRefs(state)
    }
  }
})
</script>

<template>
  <el-container class="layout-container">
    <el-header height="80px" class="layout-header">
      <div class="logo" />
      <top-menu />
    </el-header>
    <el-main class="layout-main">
      <router-view />
    </el-main>
  </el-container>
</template>

<style lang="scss">
.layout-container {
  height: 100%;
  .layout-header {
    display: flex;
    background-color: #333333;
    color: #ffffff;
    padding-left: 0;
    align-items: flex-end;

    .logo {
      width: 300px;
      height: 100%;
      font-size: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: url('../assets/logo.png');
      background-size: 185px 51px;
      background-position: center center;
      background-repeat: no-repeat;
    }
  }
  .layout-main {
    padding: 0;
  }
}
</style>
